<script setup lang="ts">

interface Props {
    merchantGroups: any[]
    isCrypto?: boolean
    showAll?: boolean
}

defineOptions({
  name: 'BasePaymentMerchant',
})

const props = withDefaults(defineProps<Props>(), {
    isCrypto: false,
    showAll: false
})

const emits = defineEmits(['change'])
const { t, locale } = useI18n();
const showMerchantSheet = ref(false)
const selectedGroup = ref()
const selectedMerchant = ref()
const merchantExpandIndex = ref(0)

function selectMerchant (item: Merchant, list: Merchant[]) {
  showMerchantSheet.value = false
  selectedMerchant.value = item
  emits('change', item, list)
}

/** 获取图标路径 */
function getMerchantsIconPath(type: number, item: object) {
  let str = (item as { alias: string })?.alias
  if (str === 'qb') {
    str = (item as { zk_id: string })?.zk_id
    return `/payment/deposit/${str}.webp`
  }
  else {
    return type === 2 ? `/webp/bank/${str}.webp` : `/payment/deposit/${str ?? 'dft'}.webp`
  }
}

function tipLabelColor(type: number) {
  switch (type) {
    case 1001:
      return 'bg-[#1375E1]'
    case 1002:
      return 'bg-brand text-bg-black-1'
    case 1003:
      return 'bg-[#F30000]'
    case 1004:
      return 'bg-[#FA8214] text-text-white-0'
    default:
      return ''
  }
}

onBeforeUpdate(() => {
  console.log(props.merchantGroups)
})

</script>

<template>
    <div class="bg-bg-black-3 rounded-[.5rem] mt-[1.1875rem]" v-if="merchantGroups?.length">
        <div class="transition-all duration-300 ease-in-out overflow-hidden p-[.75rem] border-b border-b-bg-black-4" v-for="(group, idx) in merchantGroups" :key="group.id" :class="merchantExpandIndex === idx ? 'max-h-[100rem]' : 'max-h-[2.75rem]'">
            <div v-if="!showAll" class="text-text-white-1 text-[.75rem] font-[700] mb-[.75rem] flex justify-between items-center h-[1.25rem] cursor-pointer" @click="merchantExpandIndex === idx ? (merchantExpandIndex = -1) : (merchantExpandIndex = idx)">
                <span>{{group.name}}</span>
                <div class="flex gap-[.375rem] items-center">
                    <template v-if="merchantExpandIndex !== idx">
                        <template v-for="(merchant, index) in group.merchants" :key="merchant.id">
                            <template v-if="index < 3">
                                <AppCurrencyIcon class="size-[.75rem]" :currency-type="merchant.alias?.toUpperCase()" v-if="isCrypto"/>
                                <BaseImage width=".75rem" height=".75rem" :url="getMerchantsIconPath(group.payment_type, merchant)" is-network v-else/>
                            </template>
                        </template>
                    </template>
                    <BaseIcon name="uni-arrow-right" class="text-text-white-3 size-[.75rem] transition-all duration-300 ease-in-out" :class="[merchantExpandIndex === idx && 'rotate-[90deg]']"/>
                </div>
            </div>
            <div class="grid gap-x-[.375rem] grid-cols-3 gap-y-[.75rem]">
                <template v-for="(merchant, index) in group.merchants" :key="merchant.id">
                    <div class="bg-bg-black-4 rounded-[.375rem] p-[.5rem] min-h-[7rem] relative" @click="selectMerchant(merchant, group)" v-if="showAll || (!showAll && index < 3)">
                        <div class="bg-bg-black-9 rounded-[.25rem] w-full h-[2.625rem] flex justify-center items-center">
                            <AppCurrencyIcon class="size-[1.25rem]" :currency-type="merchant.alias?.toUpperCase()" v-if="isCrypto"/>
                            <BaseImage width="1.125rem" height="1.125rem" :url="getMerchantsIconPath(group.payment_type, merchant)" is-network v-else/>
                        </div>
                        <div class="mt-[.4375rem] mb-[.25rem] text-[.75rem] text-text-white-0">{{merchant.name}}</div>
                        <div class="text-text-white-2 text-[.625rem]">{{merchant.amount_min}}-{{merchant.amount_max}}</div>
                        <div class="text-text-white-2 text-[.625rem]">{{(merchant.currency_name || merchant.alias).toUpperCase()}}</div>
                        <div class="px-[.375rem] h-[1rem] text-[.625rem] rounded-tl-[.5rem] rounded-br-[.5rem] text-center left-0 top-0 absolute" v-if="group.pname" :class="tipLabelColor(group.ptype)">
                            {{ group.pname }} {{ group.ptype === 1002 ? `${group.promo}%` : '' }}
                        </div>
                    </div>
                </template>
            </div>
            <div class="text-[.625rem] text-text-white-3 mt-[.875rem] mx-auto flex center" v-if="!showAll && group.merchants.length > 3" @click="showMerchantSheet = true; selectedGroup = group">
                <span>{{t('common_show_all')}}</span>
                <BaseIcon name="uni-arrow-right" class="text-text-white-3" />
            </div>
        </div>
        <BaseSheet
            v-model="showMerchantSheet"
            :title="t('recharge_pay_method')"
            :items="selectedGroup?.merchants"
            >
            <template v-slot="{ item }">
                <li
                class="mx-[0.875rem] h-[2.5rem] px-[0.5rem] rounded-[0.375rem] flex items-center justify-between"
                :class="[ item.id === selectedMerchant?.id && 'bg-bg-black-4' ]"
                @click="selectMerchant(item, selectedGroup)"
                >
                <div class="flex items-center gap-[.1875rem]">
                    <!-- 货币图标 -->
                    <AppCurrencyIcon class="size-[1.25rem]" :currency-type="item.alias.toUpperCase() as EnumCurrencyKey" v-if="isCrypto"/>
                    <BaseImage width="1.125rem" height="1.125rem" :url="getMerchantsIconPath(selectedGroup?.payment_type, item)" is-network v-else/>
                    <span class="text-[1rem] ml-[.5rem]">{{ item.name }}</span>
                    </div>
                    <div class="size-[1rem] border-[.1875rem] border-brand rounded-[50%]" v-if="item.id === selectedMerchant?.id"></div>
                </li>
            </template>
        </BaseSheet>
    </div>
    
</template>